
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghu"></use>
                    </svg>
                    <div class="name">用户</div>
                    <div class="fontclass">#icon-yonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye"></use>
                    </svg>
                    <div class="name">首页</div>
                    <div class="fontclass">#icon-shouye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taskrequest"></use>
                    </svg>
                    <div class="name">task-request</div>
                    <div class="fontclass">#icon-taskrequest</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit"></use>
                    </svg>
                    <div class="name">edit</div>
                    <div class="fontclass">#icon-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kucun"></use>
                    </svg>
                    <div class="name">库存</div>
                    <div class="fontclass">#icon-kucun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tabdict"></use>
                    </svg>
                    <div class="name">tab-dict</div>
                    <div class="fontclass">#icon-tabdict</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xitongguanli"></use>
                    </svg>
                    <div class="name">系统管理</div>
                    <div class="fontclass">#icon-xitongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jitimianshi"></use>
                    </svg>
                    <div class="name">集体面试</div>
                    <div class="fontclass">#icon-jitimianshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxitongzhi"></use>
                    </svg>
                    <div class="name">消息通知</div>
                    <div class="fontclass">#icon-xiaoxitongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongneng"></use>
                    </svg>
                    <div class="name">功能</div>
                    <div class="fontclass">#icon-gongneng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontbofanganniu"></use>
                    </svg>
                    <div class="name">开始测试</div>
                    <div class="fontclass">#icon-iconfontbofanganniu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyishi"></use>
                    </svg>
                    <div class="name">会议室</div>
                    <div class="fontclass">#icon-huiyishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-14duban"></use>
                    </svg>
                    <div class="name">14督办</div>
                    <div class="fontclass">#icon-14duban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shousuo"></use>
                    </svg>
                    <div class="name">收缩</div>
                    <div class="fontclass">#icon-shousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tingzhi"></use>
                    </svg>
                    <div class="name">停止</div>
                    <div class="fontclass">#icon-tingzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jujue"></use>
                    </svg>
                    <div class="name">拒绝</div>
                    <div class="fontclass">#icon-jujue</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                    <div class="name">delete</div>
                    <div class="fontclass">#icon-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-procedures"></use>
                    </svg>
                    <div class="name">流程管理</div>
                    <div class="fontclass">#icon-procedures</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-money"></use>
                    </svg>
                    <div class="name">费用</div>
                    <div class="fontclass">#icon-money</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzeren"></use>
                    </svg>
                    <div class="name">负责人</div>
                    <div class="fontclass">#icon-fuzeren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongwenguanli"></use>
                    </svg>
                    <div class="name">公文管理</div>
                    <div class="fontclass">#icon-gongwenguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyishenqing"></use>
                    </svg>
                    <div class="name">会议申请</div>
                    <div class="fontclass">#icon-huiyishenqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinwen"></use>
                    </svg>
                    <div class="name">新闻</div>
                    <div class="fontclass">#icon-xinwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuzhijiegou"></use>
                    </svg>
                    <div class="name">组织结构</div>
                    <div class="fontclass">#icon-zuzhijiegou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-lishi"></use>
                    </svg>
                    <div class="name">历史</div>
                    <div class="fontclass">#icon-lishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-user"></use>
                    </svg>
                    <div class="name">user</div>
                    <div class="fontclass">#icon-user</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huizongchaxun"></use>
                    </svg>
                    <div class="name">汇总查询</div>
                    <div class="fontclass">#icon-huizongchaxun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenqing"></use>
                    </svg>
                    <div class="name">申请</div>
                    <div class="fontclass">#icon-shenqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-configure"></use>
                    </svg>
                    <div class="name">configure</div>
                    <div class="fontclass">#icon-configure</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bangong"></use>
                    </svg>
                    <div class="name">办公</div>
                    <div class="fontclass">#icon-bangong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinlingyingcaiwangtubiao77"></use>
                    </svg>
                    <div class="name">收件箱</div>
                    <div class="fontclass">#icon-jinlingyingcaiwangtubiao77</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinlingyingcaiwangtubiao78"></use>
                    </svg>
                    <div class="name">发件箱</div>
                    <div class="fontclass">#icon-jinlingyingcaiwangtubiao78</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caozuorizhi"></use>
                    </svg>
                    <div class="name">操作日志</div>
                    <div class="fontclass">#icon-caozuorizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontbangongzidonghua"></use>
                    </svg>
                    <div class="name">iconfont-oa</div>
                    <div class="fontclass">#icon-iconfontbangongzidonghua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baoxiao"></use>
                    </svg>
                    <div class="name">报销</div>
                    <div class="fontclass">#icon-baoxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-statistics"></use>
                    </svg>
                    <div class="name">statistics</div>
                    <div class="fontclass">#icon-statistics</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unfold"></use>
                    </svg>
                    <div class="name">展开</div>
                    <div class="fontclass">#icon-unfold</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fujian"></use>
                    </svg>
                    <div class="name">附件</div>
                    <div class="fontclass">#icon-fujian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontmokuaiguanli"></use>
                    </svg>
                    <div class="name">模块</div>
                    <div class="fontclass">#icon-iconfontmokuaiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-exit"></use>
                    </svg>
                    <div class="name">exit</div>
                    <div class="fontclass">#icon-exit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangmu"></use>
                    </svg>
                    <div class="name">项目</div>
                    <div class="fontclass">#icon-xiangmu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhiwei"></use>
                    </svg>
                    <div class="name">职位</div>
                    <div class="fontclass">#icon-zhiwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-edit1"></use>
                    </svg>
                    <div class="name">edit</div>
                    <div class="fontclass">#icon-edit1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-system"></use>
                    </svg>
                    <div class="name">system</div>
                    <div class="fontclass">#icon-system</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontautochishi"></use>
                    </svg>
                    <div class="name">因公用车</div>
                    <div class="fontclass">#icon-iconfontautochishi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingzheng"></use>
                    </svg>
                    <div class="name">行政</div>
                    <div class="fontclass">#icon-xingzheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fenlei"></use>
                    </svg>
                    <div class="name">分类</div>
                    <div class="fontclass">#icon-fenlei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jihua"></use>
                    </svg>
                    <div class="name">计划</div>
                    <div class="fontclass">#icon-jihua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuche"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-gouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfonticonfontweibiaoti10156"></use>
                    </svg>
                    <div class="name">company add</div>
                    <div class="fontclass">#icon-iconfonticonfontweibiaoti10156</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiazai"></use>
                    </svg>
                    <div class="name">下载</div>
                    <div class="fontclass">#icon-xiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-schedule"></use>
                    </svg>
                    <div class="name">schedule</div>
                    <div class="fontclass">#icon-schedule</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weituo"></use>
                    </svg>
                    <div class="name">委托</div>
                    <div class="fontclass">#icon-weituo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shape"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-shape</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenqingxinliucheng"></use>
                    </svg>
                    <div class="name">申请新流程</div>
                    <div class="fontclass">#icon-shenqingxinliucheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-apersonaldata"></use>
                    </svg>
                    <div class="name">aPersonaldata</div>
                    <div class="fontclass">#icon-apersonaldata</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontrenmaion"></use>
                    </svg>
                    <div class="name">人脉（选中）</div>
                    <div class="fontclass">#icon-iconfontrenmaion</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-document"></use>
                    </svg>
                    <div class="name">document</div>
                    <div class="fontclass">#icon-document</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hardware"></use>
                    </svg>
                    <div class="name">hardware</div>
                    <div class="fontclass">#icon-hardware</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jixiao"></use>
                    </svg>
                    <div class="name">绩效</div>
                    <div class="fontclass">#icon-jixiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhaopin"></use>
                    </svg>
                    <div class="name">招聘</div>
                    <div class="fontclass">#icon-zhaopin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wanggexinxi05"></use>
                    </svg>
                    <div class="name">查询</div>
                    <div class="fontclass">#icon-wanggexinxi05</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wancheng"></use>
                    </svg>
                    <div class="name">完成</div>
                    <div class="fontclass">#icon-wancheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingzhuang40"></use>
                    </svg>
                    <div class="name">安全保障</div>
                    <div class="fontclass">#icon-xingzhuang40</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinzhang"></use>
                    </svg>
                    <div class="name">印章</div>
                    <div class="fontclass">#icon-yinzhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-info"></use>
                    </svg>
                    <div class="name">info</div>
                    <div class="fontclass">#icon-info</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jindu"></use>
                    </svg>
                    <div class="name">进度</div>
                    <div class="fontclass">#icon-jindu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-save"></use>
                    </svg>
                    <div class="name">save</div>
                    <div class="fontclass">#icon-save</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-history1"></use>
                    </svg>
                    <div class="name">history</div>
                    <div class="fontclass">#icon-history1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jigou"></use>
                    </svg>
                    <div class="name">机构</div>
                    <div class="fontclass">#icon-jigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongzhiruzhiicon"></use>
                    </svg>
                    <div class="name">通知入职</div>
                    <div class="fontclass">#icon-tongzhiruzhiicon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bbgshezhimima"></use>
                    </svg>
                    <div class="name">bbg_设置密码</div>
                    <div class="fontclass">#icon-bbgshezhimima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gonggao"></use>
                    </svg>
                    <div class="name">公告</div>
                    <div class="fontclass">#icon-gonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-history"></use>
                    </svg>
                    <div class="name">history</div>
                    <div class="fontclass">#icon-history</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhaopin1"></use>
                    </svg>
                    <div class="name">招聘</div>
                    <div class="fontclass">#icon-zhaopin1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-award"></use>
                    </svg>
                    <div class="name">award</div>
                    <div class="fontclass">#icon-award</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-items"></use>
                    </svg>
                    <div class="name">items</div>
                    <div class="fontclass">#icon-items</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-o2"></use>
                    </svg>
                    <div class="name">禁止</div>
                    <div class="fontclass">#icon-o2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-renshixingzheng"></use>
                    </svg>
                    <div class="name">人事行政</div>
                    <div class="fontclass">#icon-renshixingzheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jihua1"></use>
                    </svg>
                    <div class="name">计划</div>
                    <div class="fontclass">#icon-jihua1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingyong"></use>
                    </svg>
                    <div class="name">应用</div>
                    <div class="fontclass">#icon-yingyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quyu"></use>
                    </svg>
                    <div class="name">区域</div>
                    <div class="fontclass">#icon-quyu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peizhi"></use>
                    </svg>
                    <div class="name">配置</div>
                    <div class="fontclass">#icon-peizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huibao"></use>
                    </svg>
                    <div class="name">汇报</div>
                    <div class="fontclass">#icon-huibao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liucheng"></use>
                    </svg>
                    <div class="name">流程</div>
                    <div class="fontclass">#icon-liucheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gerenjiekuanjiekuan"></use>
                    </svg>
                    <div class="name">个人借款 借款</div>
                    <div class="fontclass">#icon-gerenjiekuanjiekuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaoseguanli"></use>
                    </svg>
                    <div class="name">角色管理</div>
                    <div class="fontclass">#icon-jiaoseguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gongzuoliuchaxun"></use>
                    </svg>
                    <div class="name">工作流查询</div>
                    <div class="fontclass">#icon-gongzuoliuchaxun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mouldchoice"></use>
                    </svg>
                    <div class="name">mould-choice</div>
                    <div class="fontclass">#icon-mouldchoice</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconqiyong01"></use>
                    </svg>
                    <div class="name">icon_启用-01</div>
                    <div class="fontclass">#icon-iconqiyong01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconyanqi01"></use>
                    </svg>
                    <div class="name">icon_延期-01</div>
                    <div class="fontclass">#icon-iconyanqi01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-mimazhongzhi"></use>
                    </svg>
                    <div class="name">密码重置</div>
                    <div class="fontclass">#icon-mimazhongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zuzhiguanli"></use>
                    </svg>
                    <div class="name">组织管理</div>
                    <div class="fontclass">#icon-zuzhiguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-look"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-look</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-refresh"></use>
                    </svg>
                    <div class="name">refresh</div>
                    <div class="fontclass">#icon-refresh</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add1"></use>
                    </svg>
                    <div class="name">add</div>
                    <div class="fontclass">#icon-add1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiayonghu"></use>
                    </svg>
                    <div class="name">添加用户</div>
                    <div class="fontclass">#icon-tianjiayonghu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-baoxiao1"></use>
                    </svg>
                    <div class="name">报销</div>
                    <div class="fontclass">#icon-baoxiao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hetong1"></use>
                    </svg>
                    <div class="name">合同 </div>
                    <div class="fontclass">#icon-hetong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bumen"></use>
                    </svg>
                    <div class="name">部门</div>
                    <div class="fontclass">#icon-bumen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xinwengonggao"></use>
                    </svg>
                    <div class="name">新闻公告</div>
                    <div class="fontclass">#icon-xinwengonggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daiban-copy"></use>
                    </svg>
                    <div class="name">待办</div>
                    <div class="fontclass">#icon-daiban-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shiyongzhong2"></use>
                    </svg>
                    <div class="name">使用中2</div>
                    <div class="fontclass">#icon-shiyongzhong2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxian"></use>
                    </svg>
                    <div class="name">权限</div>
                    <div class="fontclass">#icon-quanxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-01quanxianguanli01"></use>
                    </svg>
                    <div class="name">01权限管理-02</div>
                    <div class="fontclass">#icon-01quanxianguanli01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyishi1"></use>
                    </svg>
                    <div class="name">会议室</div>
                    <div class="fontclass">#icon-huiyishi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakanshuju"></use>
                    </svg>
                    <div class="name">查看数据</div>
                    <div class="fontclass">#icon-chakanshuju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaoseguanli1"></use>
                    </svg>
                    <div class="name">角色管理</div>
                    <div class="fontclass">#icon-jiaoseguanli1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zongjiepinggu1"></use>
                    </svg>
                    <div class="name">总结评估1</div>
                    <div class="fontclass">#icon-zongjiepinggu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kaifa"></use>
                    </svg>
                    <div class="name">developer</div>
                    <div class="fontclass">#icon-kaifa</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cf-c15"></use>
                    </svg>
                    <div class="name">审批</div>
                    <div class="fontclass">#icon-cf-c15</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cf-c27"></use>
                    </svg>
                    <div class="name">权限角色</div>
                    <div class="fontclass">#icon-cf-c27</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yanjiang1"></use>
                    </svg>
                    <div class="name">演讲</div>
                    <div class="fontclass">#icon-yanjiang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-statisticsico"></use>
                    </svg>
                    <div class="name">tsb_statistics_ico</div>
                    <div class="fontclass">#icon-statisticsico</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghuguanli"></use>
                    </svg>
                    <div class="name">用户管理</div>
                    <div class="fontclass">#icon-yonghuguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanxianguanli"></use>
                    </svg>
                    <div class="name">权限管理</div>
                    <div class="fontclass">#icon-quanxianguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-week"></use>
                    </svg>
                    <div class="name">week</div>
                    <div class="fontclass">#icon-week</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-09liuchengguanli"></use>
                    </svg>
                    <div class="name">自定义-流程管理</div>
                    <div class="fontclass">#icon-09liuchengguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-24zuzhijiegou"></use>
                    </svg>
                    <div class="name">自定义-组织结构</div>
                    <div class="fontclass">#icon-24zuzhijiegou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jieshou"></use>
                    </svg>
                    <div class="name">接收</div>
                    <div class="fontclass">#icon-jieshou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-art-recruit-candidate"></use>
                    </svg>
                    <div class="name">应聘</div>
                    <div class="fontclass">#icon-art-recruit-candidate</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-reset"></use>
                    </svg>
                    <div class="name">reset</div>
                    <div class="fontclass">#icon-reset</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-student1"></use>
                    </svg>
                    <div class="name">student</div>
                    <div class="fontclass">#icon-student1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-renwu"></use>
                    </svg>
                    <div class="name">任务</div>
                    <div class="fontclass">#icon-renwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chexiao"></use>
                    </svg>
                    <div class="name">撤销</div>
                    <div class="fontclass">#icon-chexiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-subtotal"></use>
                    </svg>
                    <div class="name">Subtotal</div>
                    <div class="fontclass">#icon-subtotal</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuan-copy"></use>
                    </svg>
                    <div class="name">上传</div>
                    <div class="fontclass">#icon-shangchuan-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bumen1"></use>
                    </svg>
                    <div class="name">部门</div>
                    <div class="fontclass">#icon-bumen1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jihuaguanli"></use>
                    </svg>
                    <div class="name">计划管理</div>
                    <div class="fontclass">#icon-jihuaguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconmajor52"></use>
                    </svg>
                    <div class="name">icon_major5.2</div>
                    <div class="fontclass">#icon-iconmajor52</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jinduchaxun"></use>
                    </svg>
                    <div class="name">进度查询</div>
                    <div class="fontclass">#icon-jinduchaxun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconcompanyinformation01"></use>
                    </svg>
                    <div class="name">icon_company_information-01</div>
                    <div class="fontclass">#icon-iconcompanyinformation01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-geren"></use>
                    </svg>
                    <div class="name">个人</div>
                    <div class="fontclass">#icon-geren</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaxun"></use>
                    </svg>
                    <div class="name">查询</div>
                    <div class="fontclass">#icon-chaxun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-renwu1"></use>
                    </svg>
                    <div class="name">任务</div>
                    <div class="fontclass">#icon-renwu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-raxiconchaxuntongji"></use>
                    </svg>
                    <div class="name">raxicon_查询统计</div>
                    <div class="fontclass">#icon-raxiconchaxuntongji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shibai"></use>
                    </svg>
                    <div class="name">失败</div>
                    <div class="fontclass">#icon-shibai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chucha"></use>
                    </svg>
                    <div class="name">出差</div>
                    <div class="fontclass">#icon-chucha</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biaoshileijihuamoban"></use>
                    </svg>
                    <div class="name">标识类_计划模板</div>
                    <div class="fontclass">#icon-biaoshileijihuamoban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-student"></use>
                    </svg>
                    <div class="name">student</div>
                    <div class="fontclass">#icon-student</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiekuan"></use>
                    </svg>
                    <div class="name">借款</div>
                    <div class="fontclass">#icon-jiekuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-template"></use>
                    </svg>
                    <div class="name">template</div>
                    <div class="fontclass">#icon-template</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-73"></use>
                    </svg>
                    <div class="name">enroll</div>
                    <div class="fontclass">#icon-73</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-teacher"></use>
                    </svg>
                    <div class="name">teacher</div>
                    <div class="fontclass">#icon-teacher</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_audit"></use>
                    </svg>
                    <div class="name">icon_audit</div>
                    <div class="fontclass">#icon-icon_audit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-function-manager"></use>
                    </svg>
                    <div class="name">icon-function-manager</div>
                    <div class="fontclass">#icon-icon-function-manager</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-system1"></use>
                    </svg>
                    <div class="name">system</div>
                    <div class="fontclass">#icon-system1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pc_competition"></use>
                    </svg>
                    <div class="name">pc_competition</div>
                    <div class="fontclass">#icon-pc_competition</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-enterprise"></use>
                    </svg>
                    <div class="name">enterprise</div>
                    <div class="fontclass">#icon-enterprise</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-computer"></use>
                    </svg>
                    <div class="name">computer</div>
                    <div class="fontclass">#icon-computer</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-art-system-company"></use>
                    </svg>
                    <div class="name">企业信息</div>
                    <div class="fontclass">#icon-art-system-company</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-state"></use>
                    </svg>
                    <div class="name">state</div>
                    <div class="fontclass">#icon-state</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dbauditshujukushenji"></use>
                    </svg>
                    <div class="name">dbaudit数据库审计</div>
                    <div class="fontclass">#icon-dbauditshujukushenji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-art-system-function"></use>
                    </svg>
                    <div class="name">工作类别-01</div>
                    <div class="fontclass">#icon-art-system-function</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Student"></use>
                    </svg>
                    <div class="name">Student</div>
                    <div class="fontclass">#icon-Student</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-datastatistics"></use>
                    </svg>
                    <div class="name">data statistics</div>
                    <div class="fontclass">#icon-datastatistics</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-management-recruitin"></use>
                    </svg>
                    <div class="name">management-recruitin</div>
                    <div class="fontclass">#icon-management-recruitin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-scientificresearch"></use>
                    </svg>
                    <div class="name">scientific research</div>
                    <div class="fontclass">#icon-scientificresearch</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yy-temporary"></use>
                    </svg>
                    <div class="name">temporary</div>
                    <div class="fontclass">#icon-yy-temporary</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gerenjianli"></use>
                    </svg>
                    <div class="name">个人简历</div>
                    <div class="fontclass">#icon-gerenjianli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-art-system-major"></use>
                    </svg>
                    <div class="name">专业课程</div>
                    <div class="fontclass">#icon-art-system-major</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-research"></use>
                    </svg>
                    <div class="name">research</div>
                    <div class="fontclass">#icon-research</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-art-recruit-recruit"></use>
                    </svg>
                    <div class="name">招聘</div>
                    <div class="fontclass">#icon-art-recruit-recruit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shumu"></use>
                    </svg>
                    <div class="name">树木</div>
                    <div class="fontclass">#icon-shumu</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
